
Ext.define('MyApp.view.AddAppointment', {
    extend: 'Ext.Panel',
	xtype: 'addappointment',
	requires: ['Ext.ux.DateTimePicker'
	],	
    config: {
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'Appointments',
				items: [
					{
						xtype: 'button',
						ui: 'small',
						text: 'Discard',
						handler: function(){
							Ext.Viewport.setActiveItem('appointmentlist',{type:'slide', direction:'right'});
						}
					}
				]
            },

            {
                xtype: 'formpanel',
				//id: 'appointmentForm',
				itemId: 'appointmentForm',
                height: '100%',
                width: '100%',
                scrollable: true,
				url: 'http://appt.elasticbeanstalk.com/appointment.php',
				standardSubmit: true,
				padding:2,
                items: [
                    
                    {
						xtype: 'fieldset',
						padding: 0,
						items: [
							{
								xtype: 'textfield',
								label: 'First',
								itemId: 'firstname',
								name: 'firstname'
							},
							{
								xtype: 'textfield',
								label: 'Last',
								itemId: 'lastname',
								name: 'lastname'
							},
							{
								xtype: 'numberfield',
								label: 'Phone',
								itemId: 'mobile',
								name: 'mobile'
							},
							{
								xtype: 'emailfield',
								label: 'Email',
								placeHolder: 'email@example.com',
								itemId: 'email',
								name: 'email'
							},
							{
								xtype: 'datepickerfield',
								label: 'Date',
								placeHolder: 'mm/dd/yyyy',
								itemId: 'date',
								name: 'date',
								value: new Date(),
								picker: {
									yearFrom: parseInt(getCurrentYear()),
									yearTo: parseInt(getMaxYear())
								}
							},
							{
								xtype: 'datetimepickerfield',
								itemId: 'starttime',
								name : 'starttime',
								label: 'Start',
								dateTimeFormat: "g:i A",
								picker: {
									yearFrom: 2013,
									minuteInterval : 5,
									ampm : true,
									slotOrder: ['hour','minute','ampm']
								}
							},
							{
								xtype: 'datetimepickerfield',
								itemId: 'endtime',
								name : 'endtime',
								label: 'End',
								dateTimeFormat: "g:i A",
								picker: {
									yearFrom: 2013,
									minuteInterval : 5,
									ampm : true,
									slotOrder: ['hour','minute','ampm']
								}
							},
							{
								xtype: 'textareafield',
								label: 'Notes',
								itemId: 'notes',
								name: 'notes'
							},
							{
								xtype: 'textfield',
								label: 'Location',
								autoCapitalize: true,
								itemId: 'mapaddress',
								name: 'mapaddress'
							},
							{
								xtype: 'checkboxfield',
								label: 'Map',
								itemId: 'maplink',
								name: 'maplink'
							},
							{
								xtype: 'checkboxfield',
								label: 'Calendar',
								itemId: 'calendar',
								name: 'calendar'
							},
							{
								xtype: 'hiddenfield',
								name: 'userId',
								value: 1,
								itemId: 'userId'
							},
							{
								xtype: 'hiddenfield',
								name: 'sentby',
								value: '',
								itemId: 'sentby'
							}
						]
					},
					{
						xtype: 'container',
						docked: 'bottom',
						layout: {
							type: 'hbox'
						},
						items: [
							{
								xtype: 'button',
								flex: 1,
								height: 26,
								margin: 3,
								ui: 'action',
								text: 'Save',
								itemId: 'save'
								
							},
							{
								xtype: 'button',
								flex: 1,
								height: 26,
								margin: 3,
								ui: 'action',
								text: 'Email'
							},
							{
								xtype: 'button',
								flex: 1,
								height: 26,
								margin: 3,
								ui: 'action',
								text: 'SMS',
								itemId: 'saveSendSMS',
								
							}
						]
					}
                ]
            }
        ]
    }

});
function getCurrentYear() {
    return new Date().getFullYear();
}


function getMaxYear() {
	return new Date().getFullYear() + 5;
}